<template>
	<view class="template-project">
		
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="true" backgroundColor="#ffffff" :bottomShadow="false" @click-back="navigateBack"
			backIconColor="#ffffff">
		</tn-nav-bar>
		
		<view class="tn-bg-white tn-safe-area-inset-bottom" style="border-radius: 50rpx 50rpx 0 0;">
			<!-- 标题栏 -->
			<view class="title-bar">
				<text class="title-text">活动</text>
			</view>
			<!-- 状态栏（标签栏） -->
			<view class="tab-bar">
				<view class="tab-item" :class="{active: currentTab === 'all'}" @click="switchTab('all')">全部</view>
				<view class="tab-item" :class="{active: currentTab === 'ongoing'}" @click="switchTab('ongoing')">进行中
				</view>
				<view class="tab-item" :class="{active: currentTab === 'upcoming'}" @click="switchTab('upcoming')">未开始
				</view>
				<view class="tab-item" :class="{active: currentTab === 'ended'}" @click="switchTab('ended')">已结束</view>
			</view>
			<!-- 图文内容：根据当前标签筛选数据 -->
			<view class="tn-padding-bottom-lg">
				<block v-for="(item,index) in filteredContent" :key="index">
					<view class="tn-blogger-content__wrap" @click="goToDetail(item)">
						<!-- 图片区域（包含右上角状态标签） -->
						<view class="image-container">
							<image class="tn-blogger-content__main-image tn-blogger-content__main-image--1"
								:src="item.mainImage[0]" mode="aspectFill">
							</image>
							<!-- 右上角状态标签 -->
							<view class="status-tag" :class="item.status">
								{{ statusTextMap[item.status] }}
							</view>
						</view>
						<!-- 活动信息区域-->
						<view class="activity-info-wrapper">
							<!-- 活动标题 -->
							<view class="title-container">
								<text class="activity-title">{{ item.title }}</text>
							</view>
							<!-- 时间信息区域 -->
							<view class="time-info">
								<view class="time-item tn-color-gray">
									<image class="time-icon" :src="timeIconUrl" mode="widthFix"></image>
									<text>{{ item.startTime }}至{{ item.endTime }}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateProject',
		mixins: [template_page_mixin],
		data() {
			return {
				currentTab: 'all',
				statusTextMap: {
					ongoing: '进行中',
					upcoming: '未开始',
					ended: '已结束'
				},
				timeIconUrl: '/static/activityImg/time.png',
				content: [{
						title: '开源技术分享会',
						startTime: '2023年10月15日 09:00',
						endTime: '2023年10月15日 17:00',
						organizer: '开源技术社区',
						location: '吉农主校区报告厅', // 地点字段
						mainImage: ['/static/activityImg/3.jpg'],
						collectionCount: 265,
						commentCount: 22,
						likeCount: 62,
						status: 'ongoing',
						signupDeadline: '2023年10月14日 20:00' // 截止报名时间
					},
					{
						title: '创意设计工作坊',
						startTime: '2023年10月20日 14:00',
						endTime: '2023年10月20日 18:00',
						organizer: '创意设计师联盟',
						location: '吉农艺术楼302',
						mainImage: ['/static/activityImg/2.jpg'],
						collectionCount: 265,
						commentCount: 22,
						likeCount: 62,
						status: 'upcoming',
						signupDeadline: '2023年10月19日 18:00'
					},
					{
						title: '前端框架交流会',
						startTime: '2023年10月5日 10:00',
						endTime: '2023年10月5日 16:00',
						organizer: '前端开发者协会',
						location: '吉农计算机楼201',
						mainImage: ['/static/activityImg/3.jpg'],
						collectionCount: 265,
						commentCount: 22,
						likeCount: 62,
						status: 'ended',
						signupDeadline: '2023年10月4日 20:00'
					},
					{
						title: '产品经理实战营',
						startTime: '2023年10月18日 09:30',
						endTime: '2023年10月19日 17:30',
						organizer: '产品人俱乐部',
						location: '吉农创客空间',
						mainImage: ['/static/activityImg/1.jpg'],
						collectionCount: 265,
						commentCount: 22,
						likeCount: 62,
						status: 'ongoing',
						signupDeadline: '2023年10月17日 20:00'
					},
					{
						title: '人工智能应用论坛',
						startTime: '2023年10月10日 09:00',
						endTime: '2023年10月10日 15:00',
						organizer: '人工智能研究院',
						location: '吉农国际交流中心',
						mainImage: ['/static/activityImg/1.jpg'],
						collectionCount: 265,
						commentCount: 22,
						likeCount: 62,
						status: 'ended',
						signupDeadline: '2023年10月9日 20:00'
					}
				]
			}
		},
		computed: {
			filteredContent() {
				if (this.currentTab === 'all') {
					return this.content;
				} else {
					return this.content.filter(item => item.status === this.currentTab);
				}
			}
		},
		methods: {
			switchTab(tabType) {
				this.currentTab = tabType;
			},
			// 跳转详情页并传递当前活动数据
			goToDetail(activity) {
				uni.navigateTo({
					url: '/preferredPages/activityDetail', // 详情页路径
					success: (res) => {
						// 通过事件通道传递数据
						res.eventChannel.emit('passActivityData', {
							data: activity
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.template-project {
	  background-color: #f5f7fa;
	  min-height: 100vh;
	  padding-top: 83rpx;
	}
	.title-bar {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.title-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		background-color: #007AFF;
		color: white;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.tab-bar {
		display: flex;
		border-bottom: 1rpx solid #eee;
	}

	.tab-item {
		flex: 1;
		padding: 30rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #999;
		position: relative;
	}

	.tab-item.active {
		color: #007AFF;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 6rpx;
		background-color: #007AFF;
		border-radius: 3rpx;
	}

	.image-container {
		position: relative;
	}

	.status-tag {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
		padding: 8rpx 15rpx;
		color: white;
		font-size: 24rpx;
		font-weight: bold;
		border-radius: 6rpx;
		z-index: 10;
	}

	.status-tag.ongoing {
		background-color: #00B42A;
	}

	.status-tag.upcoming {
		background-color: #FF7D00;
	}

	.status-tag.ended {
		background-color: #999999;
	}

	/* 活动信息容器 - 统一控制内边距和间距 */
	.activity-info-wrapper {
		padding: 25rpx 30rpx;
		box-sizing: border-box;
		/* 确保内边距不影响宽度计算 */
	}

	/* 标题容器：消除默认缩进 */
	.title-container {
		margin: 0;
		padding: 0;
	}

	/* 标题样式：明确字体属性，确保左对齐 */
	.activity-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		line-height: 44rpx;
		display: inline-block;
		/* 确保内容从左侧开始 */
	}

	/* 时间信息区域调整 */
	.time-info {
		margin-top: 15rpx;
		margin-bottom: 0;
		padding: 0;
		/* 移除可能的默认内边距 */
	}

	.time-icon {
		width: 26rpx;
		height: 26rpx;
		margin-right: 8rpx;
		vertical-align: middle;
	}

	.time-item {
		font-size: 24rpx;
		line-height: 36rpx;
		display: flex;
		align-items: center;
		padding: 0;

		.iconfont {
			margin-right: 8rpx;
			font-size: 26rpx;
		}
	}

	.organizer {
		font-size: 26rpx;
		color: #333;
		line-height: 36rpx;
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		padding: 0;

		.iconfont {
			margin-right: 8rpx;
			color: #007AFF;
			font-size: 28rpx;
		}
	}

	.tn-blogger-content {
		&__wrap {
			box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.09);
			border-radius: 20rpx;
			margin: 30rpx;
			overflow: hidden;
		}

		&__label {
			/* 移除可能导致冲突的样式 */
			margin: 0 !important;
			padding: 0 !important;

			&__title {
				line-height: 80rpx;
				color: #333;
			}

			&__item {
				line-height: 45rpx;
				padding: 0 20rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #00FFC6;
					padding-right: 10rpx;
				}
			}
		}

		&__main-image {
			border-radius: 16rpx 16rpx 0 0;

			&--1 {
				width: 100%;
				height: 300rpx;
				display: block;
			}
		}

		&__count-icon {
			font-size: 40rpx;
			padding-right: 5rpx;
		}
	}

	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	.bg-contaniner {
		position: fixed;
		top: -0rpx;
		left: -300rpx;
		--text-color: hsl(0 95% 60%);
		--bg-color: hsl(0 0% 100%);
		--bg-size: 200px;
		height: 100%;
		display: grid;
		place-items: center;
		place-content: center;
		overflow: hidden;
		background-color: var(--bg-color);
		z-index: -1;
	}

	.bg-contaniner::before {
		--size: 150vmax;
		content: "";
		inline-size: var(--size);
		block-size: var(--size);
		background-image: url("https://resource.tuniaokj.com/images/animate/animate3.png");
		background-size: var(--bg-size);
		background-repeat: repeat;
		transform: rotate(45deg);
		opacity: 0.25;
		animation: bg 6s linear infinite;
	}

	@media (prefers-reduced-motion: reduce) {
		.bg-contaniner::before {
			animation-duration: 0s;
		}
	}

	@keyframes bg {
		to {
			background-position: 0 calc(var(--bg-size) * -1);
		}
	}
</style>